<template>
  <section style="height:100%;">
    <div class="login">
      <div class="content-box">
        <div class="middle-body">
          <div class="login-form">
            <div class="f-left">
              <div class="left-nr">
                <div class="head">
                  <img src="/img/logo.png" />
                  <p>云his门诊系统</p>
                </div>
              </div>
            </div>
            <div ref="form" class="f-right">
              <div class="right-title">
                <span class="cur">账号登录</span>
              </div>
              <div class="form-box">
                <div class="form-input" :class="[errorForm.phone?'error':'']">
                  <input
                    class="input"
                    v-model.trim="form.phone"
                    @blur="valid('phone')"
                    placeholder="填写您的登录账号"
                  />
                  <div class="input-icon">
                    <i class="iconfont iconyonghu"></i>
                  </div>
                </div>
                <div class="form-input" :class="[errorForm.adminPass?'error':'']">
                  <input
                    class="input"
                    type="password"
                    v-model.trim="form.adminPass"
                    @blur="valid('adminPass')"
                    placeholder="填写您的密码"
                  />
                  <div class="input-icon">
                    <i class="iconfont iconicon-lock"></i>
                  </div>
                </div>
              </div>
              <p style="color:#999;margin-top:40px;">
                <el-checkbox v-model="rememberUser" class="checkbox-20">记住账号</el-checkbox>
              </p>
              <br />
              <el-button
                type="primary"
                size="default"
                :loading="btnLoading"
                round
                plain
                style="width:100%;"
                @click="onSubmit"
              >登录</el-button>
            </div>
            <check-role v-model="dialogRole" :roleList="roleList" @selectRole="selectRole"></check-role>
          </div>
        </div>
        <div class="footer-body">© 2019 Shangong Technology Co,. Ltd. All Rights Reserved</div>
      </div>
    </div>
  </section>
</template>
<script>
import "@/_css/login.scss";
export default {
  computed: {},
  components: {
    "check-role": () => import("./_com/checkRole.vue"),
  },
  data() {
    return {
      loginLoading: false,
      rememberUser: true,
      btnLoading: false,
      dialogRole: false,
      roleList: [],
      form: {
        phone: "",
        adminPass: "",
        accessToken: "",
      },
      errorForm: {
        phone: false,
        adminPass: false,
      },
    };
  },
  created() {
    let th = this;
    let nologin = th.$route.query.nologin;
    if (nologin) {
      th.$message.error("请先登录！");
    }
  },
  mounted() {
    let th = this;
    let LoginAccount = window.localStorage.getItem("LoginAccount");
    if (LoginAccount) {
      th.form.phone = LoginAccount;
    }
    document.addEventListener("keyup", th.onKeyUp);
    //删除登录信息
    window.sessionStorage.removeItem("adminUser");
    window.sessionStorage.removeItem("token");
    //读取是否有token存在就自动登录
    let accessToken = th.$route.query.token;
    if (accessToken) {
      th.form.phone = th.$route.query.account;
      th.form.accessToken = accessToken;
      th.$message.success("正在登录中，请稍候。。。");
      th.onSubmit();
    }
  },
  beforeDestroy() {
    document.removeEventListener("keyup", this.onKeyUp);
  },
  methods: {
    valid(value) {
      let th = this;
      if (!th.form[value]) {
        th.errorForm[value] = true;
        return;
      }
      if (value == "adminPass") {
        if (th.form.adminPass.length < 6) {
          th.errorForm[value] = true;
          return;
        }
      }
      th.errorForm[value] = false;
    },
    onSubmit() {
      let th = this;
      if (!th.form.accessToken) {
        th.valid("phone");
        th.valid("adminPass");
        if (th.errorForm.phone || th.errorForm.adminPass) {
          return;
        }
      }
      let j = {
        loginName: th.form.phone,
        systemCode: th.$root.systemCode,
        addHead: false,
      };
      if (th.form.accessToken) {
        j.accessToken = th.form.accessToken;
      } else {
        j.psw = hex_md5(th.form.adminPass);
      }
      th.btnLoading = true;
      th.$api.getRoles(j).then((res) => {
        if (res.executed) {
          if (res.dataBody.length == 0) {
            th.$message.error("您无权限登录本系统");
            th.btnLoading = false;
            th.form.accessToken = "";
            return;
          }
          let imUser = {
            token: j.psw,
            account: j.loginName,
          };
          let visit_data = res.dataBody[0];
          //th.$store.commit("Set_ImUser", imUser);
          if (res.dataBody.length > 1) {
            th.dialogRole = true;
            th.roleList = res.dataBody;
          } else {
            th.selectRole(res.dataBody[0]);
          }
        } else {
          th.$message.error("您无法登录本系统！");
          th.btnLoading = false;
          th.form.accessToken = "";
        }
      });
    },
    selectRole(obj) {
      let th = this;
      let j = {
        loginName: th.form.phone,
        systemCode: th.$root.systemCode,
        roleId: obj.roleId,
        addHead: false,
      };
      if (th.form.accessToken) {
        j.accessToken = th.form.accessToken;
      } else {
        j.psw = hex_md5(th.form.adminPass);
      }
      th.$api.login(j).then((res) => {
        if (res.executed) {
          th.$message.success("登录成功");
          let member = res.member;
          let user = {
            head: member.head,
            phone: th.jiaMi(member.phone),
            memberSex: member.memberSex,
            token: th.jiaMi(member.token),
            memberId: th.jiaMi(member.memberId),
            memberLogin: member.memberLogin,
            memberName: member.memberName,
            roleName: obj.roleName,
            roleId: th.jiaMi(obj.roleId),
            hpId: th.jiaMi(member.hpId),
            // hpName:
          };
          //  th.$api.getImTokenAndAccId({memberId:member.memberId}).then((res:any)=>{
          //       if(res.executed){
          //         window.localStorage.setItem("imAccId", res.dataBody.accId);
          //         window.localStorage.setItem("imLoginpsw", res.dataBody.token);
          //       }
          // }).catch((error:any)=>{
          //   console.log(error);
          // })
          //保存账号
          if (th.rememberUser) {
            window.localStorage.setItem("LoginAccount", th.form.phone);
          } else {
            window.localStorage.removeItem("LoginAccount");
          }
          th.$store.commit("Set_adminUser", user);
          let strUser = JSON.stringify(user);
          window.sessionStorage.setItem("adminUser", strUser);
          window.sessionStorage.setItem(
            "token",
            window.hex_md5(strUser + th.$config.publicKey)
          );
          th.$api
            .getRolePermissions({
              adminRoleId: th.jieMi(user.roleId),
            })
            .then((res) => {
              if (res.executed) {
                let list = res.dataBody.permissions;
                if (list[0].childPermission.length > 0 && list[0].url == "") {
                  th.$router.push(list[0].childPermission[0].url);
                } else {
                  th.$router.push(list[0].url);
                }
              }
            });
        } else {
          th.$message.error(res.message);
          th.form.accessToken = "";
        }
        th.btnLoading = false;
      });
    },
    onKeyUp(e) {
      let th = this;
      if (e.keyCode == 13) {
        th.onSubmit();
      }
    },
  },
};
</script>
